<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="../../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../jquery/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>

    <script src="../../../jquery/jquery-1.11.1-min.js" type="text/javascript"></script>
    <script src="../../../jquery/bootstrap_3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../../jquery/zTree_v3-master/js/jquery.ztree.all.min.js" type="text/javascript"></script>

    <SCRIPT type="text/javascript">
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };


        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

    </SCRIPT>

</head>
<body>

<!-- 分配许可的模态窗口 -->
<div class="modal fade" id="assignRoleForUserModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">为<b>张三</b>分配角色</h4>
            </div>
            <div class="modal-body">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="90%">
                    <tr>
                        <td width="42%">
                            <div class="list_tit" style="border: solid 1px #D5D5D5; background-color: #F4F4B5;">
                                张三，未分配角色列表
                            </div>
                        </td>
                        <td width="15%">
                            &nbsp;
                        </td>
                        <td width="43%">
                            <div class="list_tit" style="border: solid 1px #D5D5D5; background-color: #F4F4B5;">
                                张三，已分配角色列表
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select id="srcList" multiple="multiple" name="srcList"
                                    size="15" style="width: 100%">
                                <option>
                                    总裁
                                </option>
                                <option>
                                    市场部普通职员
                                </option>
                                <option>
                                    市场总监
                                </option>
                                <option>
                                    销售部销售员
                                </option>
                                <option>
                                    销售总监
                                </option>
                            </select>
                        </td>
                        <td>
                            <p align="center">
                                <a href="javascript:void(0);" title="分配角色"><span
                                        class="glyphicon glyphicon-chevron-right" style="font-size: 20px;"></span></a>
                            </p>
                            <br><br>
                            <p align="center">
                                <a href="javascript:void(0);" title="撤销角色"><span
                                        class="glyphicon glyphicon-chevron-left" style="font-size: 20px;"></span></a>
                            </p>
                        </td>
                        <td>
                            <select id="destList" multiple="multiple" name="destList"
                                    size="15" style="width: 100%">
                                <option>
                                    副总裁
                                </option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑用户的模态窗口 -->
<div class="modal fade" id="editUserModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改用户</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="edit-loginActNo">登录帐号<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="edit-loginActNo" type="text" value="zhangsan">
                        </div>
                        <label class="col-sm-2 control-label" for="edit-username">用户姓名</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="edit-username" type="text" value="张三">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="edit-loginPwd">登录密码<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="edit-loginPwd" type="password" value="123">
                        </div>
                        <label class="col-sm-2 control-label" for="edit-confirmPwd">确认密码<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="edit-confirmPwd" type="password" value="123">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="edit-email">邮箱</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="edit-email" type="text" value="zhangsan@bjpowernode.com">
                        </div>
                        <label class="col-sm-2 control-label" for="edit-expireTime">失效时间</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="edit-expireTime" type="text" value="2017-02-14 10:10:10">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="edit-lockStatus">锁定状态</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-lockStatus">
                                <option></option>
                                <option selected>启用</option>
                                <option>锁定</option>
                            </select>
                        </div>
                        <label class="col-sm-2 control-label" for="create-org">部门名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-org" placeholder="输入部门名称，自动补全" type="text"
                                   value="市场部">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="edit-allowIps">允许访问的IP</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="edit-allowIps" placeholder="多个用逗号隔开" style="width: 280%"
                                   type="text" value="127.0.0.1,192.168.100.2">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" data-dismiss="modal" type="button">更新</button>
            </div>
        </div>
    </div>
</div>

<div>
    <div style="position: relative; left: 30px; top: -10px;">
        <div class="page-header">
            <h3>用户明细 <small>张三</small></h3>
        </div>
        <div style="position: relative; height: 50px; width: 250px;  top: -72px; left: 80%;">
            <button class="btn btn-default" onclick="window.history.back();" type="button"><span
                    class="glyphicon glyphicon-arrow-left"></span> 返回
            </button>
        </div>
    </div>
</div>

<div style="position: relative; left: 60px; top: -50px;">

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade in active" id="role-info">
            <div style="position: relative; top: 20px; left: -30px;">
                <div style="position: relative; left: 40px; height: 30px; top: 20px;">
                    <div style="width: 300px; color: gray;">登录帐号</div>
                    <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>zhangsan</b></div>
                    <div style="height: 1px; width: 600px; background: #D5D5D5; position: relative; top: -20px;"></div>
                </div>
                <div style="position: relative; left: 40px; height: 30px; top: 40px;">
                    <div style="width: 300px; color: gray;">用户姓名</div>
                    <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>张三</b></div>
                    <div style="height: 1px; width: 600px; background: #D5D5D5; position: relative; top: -20px;"></div>
                </div>
                <div style="position: relative; left: 40px; height: 30px; top: 60px;">
                    <div style="width: 300px; color: gray;">邮箱</div>
                    <div style="width: 500px;position: relative; left: 200px; top: -20px;">
                        <b>zhangsan@bjpowernode.com</b></div>
                    <div style="height: 1px; width: 600px; background: #D5D5D5; position: relative; top: -20px;"></div>
                </div>
                <div style="position: relative; left: 40px; height: 30px; top: 80px;">
                    <div style="width: 300px; color: gray;">失效时间</div>
                    <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>2017-02-14 10:10:10</b>
                    </div>
                    <div style="height: 1px; width: 600px; background: #D5D5D5; position: relative; top: -20px;"></div>
                </div>
                <div style="position: relative; left: 40px; height: 30px; top: 100px;">
                    <div style="width: 300px; color: gray;">允许访问IP</div>
                    <div style="width: 500px;position: relative; left: 200px; top: -20px;">
                        <b>127.0.0.1,192.168.100.2</b></div>
                    <div style="height: 1px; width: 600px; background: #D5D5D5; position: relative; top: -20px;"></div>
                </div>
                <div style="position: relative; left: 40px; height: 30px; top: 120px;">
                    <div style="width: 300px; color: gray;">锁定状态</div>
                    <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>启用</b></div>
                    <div style="height: 1px; width: 600px; background: #D5D5D5; position: relative; top: -20px;"></div>
                </div>
                <div style="position: relative; left: 40px; height: 30px; top: 140px;">
                    <div style="width: 300px; color: gray;">部门名称</div>
                    <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>市场部</b></div>
                    <div style="height: 1px; width: 600px; background: #D5D5D5; position: relative; top: -20px;"></div>
                    <button class="btn btn-default" data-target="#editUserModal" data-toggle="modal"
                            style="position: relative; left: 76%; top: -40px;" type="button"><span
                            class="glyphicon glyphicon-edit"></span> 编辑
                    </button>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="permission-info">
            <div style="position: relative; top: 20px; left: 0px;">
                <ul class="ztree" id="treeDemo" style="position: relative; top: 15px; left: 15px;"></ul>
                <div style="position: relative;top: 30px; left: 76%;">
                    <button class="btn btn-default" data-target="#assignRoleForUserModal" data-toggle="modal"
                            type="button"><span class="glyphicon glyphicon-edit"></span> 分配角色
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>